<template>
	<view class="container">
		<u-form :model="form" ref="uForm" label-width="150" label-position="top" :error-type="errorType">
			<u-form-item label="食谱名称" prop="title" :border-bottom="false">
				<u-input v-model="form.title" placeholder="请输入食谱名称"/>
			</u-form-item>
			<u-form-item label="开始时间" prop="beginAt" :border-bottom="false">
				<u-input type="select" placeholder="请选择时间" v-model="form.beginAt" @click="beginShow = true" />
			</u-form-item>
			<u-form-item label="截止时间" prop="endAt" :border-bottom="false">
				<u-input type="select" placeholder="请选择时间" v-model="form.endAt"@click="endShow = true" />
			</u-form-item>
			<u-form-item label="照片" :border-bottom="false">
					<u-upload ref="uUpload" :max-size="5 * 1024 * 1024" :file-list="fileList" :auto-upload="false" max-count="1"></u-upload>
			</u-form-item>
			<view style="display: flex;justify-content: center;align-items: center;margin-top: 100rpx;">
				<view class="common-btn" @click="submit">确认</view>
			</view>
			<u-picker v-model="beginShow" mode="time" :params="params" @confirm="confirmBegin"></u-picker>
			<u-picker v-model="endShow" mode="time" :params="params" @confirm="confirmEnd"></u-picker>
		</u-form>
	</view>
</template>

<script>
	import {
		addCookBook
	} from '@/api/recipe.js'
	import {
		formatDateByTimestamp
	} from '@/utils/utils.js'
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				fileList: [],
				form: {
					title: '',
					content: '',
					beginAt: '',
					endAt: '',
				},
				rules: {
					title: [{
						required: true,
						message: '请填写食谱名称',
					}, ],
					beginAt: [{
						required: true,
						message: '请选择开始时间',
					}, ],
					endAt: [{
						required: true,
						message: '请选择截止时间',
					}, ],
				},
				errorType: ['toast'],

				beginShow: false,
				endShow: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					timestamp: true,
				},
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			confirmBegin(res) {
				console.log(res);
				this.form.beginAt = formatDateByTimestamp(res.timestamp, 'yyyy/mm/dd');
			},
			confirmEnd(res) {
				console.log(res);
				this.form.endAt = formatDateByTimestamp(res.timestamp, 'yyyy/mm/dd');
			},
			submit() {
				console.log(this.form);
				this.$refs.uForm.validate(valid => {
					console.log(valid);
					if (valid) {
						this.addRecipe();
						return;
					}
				});
			},

			addRecipe() {
				let files = this.$refs.uUpload.lists;
				if (files.length === 0) {
					this.$u.toast('请上传食谱照片')
					return;
				}
				let fileList = [];
				fileList.push({
					'name': 'file',
					'file': files[0].file,
					'uri': files[0].url,
				});
				
				addCookBook(this.form, files[0].url).then(res => {
					const eventChannel = this.getOpenerEventChannel();
					eventChannel.emit('addSuccessEvent', {data: ''});
					uni.navigateBack({})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $app-page-bg-color;
	}
</style>
<style lang="scss" scoped>
	@import "@/css/u-form.scss";

	.container {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
</style>
